<template>
  <div class="Brief">
    <div class="search d-flex">
      <div class="d-center" style="margin-left:20px;">
        <el-button size="medium" type="success" plain @click="add()">新增</el-button>
      </div>
      <div class="d-center" style="margin-left:20px;">
        <el-button size="medium" type="danger" plain @click="del()">删除</el-button>
      </div>
      <div class="input d-center">
        <span>项目简报：</span>
        <el-input size="medium" v-model="name" placeholder="请输入内容"></el-input>
      </div>
      <!-- <div class="input d-center">
        <span>项目：</span>
        <el-select size="medium" v-model="active" placeholder="请选择">
          <el-option value="1">新建</el-option>
        </el-select>
      </div>-->
      <div class="d-center" style="margin-left:20px;">
        <el-button size="medium" type="primary" plain>查询</el-button>
      </div>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        style="width: 100%;"
        height="100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>

        <el-table-column label="企业名称" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="edit(scope.row)">{{scope.row.date}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="成立日期" align="center"></el-table-column>
        <el-table-column prop="date" label="企业人数" align="center"></el-table-column>
        <el-table-column prop="date" label="总经理" align="center"></el-table-column>
        <el-table-column prop="date" label="技术负责人" align="center"></el-table-column>
        <el-table-column prop="date" label="企业资质" align="center"></el-table-column>
        <el-table-column prop="date" label="参与项目" align="center"></el-table-column>

        <el-table-column label="操作" fixed="right" width="100" align="center">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" plain @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="项目简报" :visible.sync="dialogFormVisible" @close="close" width="80%" top="10">
      <el-form :model="form">
        <el-form-item prop="name" label="联系电话" :label-width="'100px'">
          <el-input size="medium" v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="职称" :label-width="'100px'">
          <el-select size="medium" v-model="form.name" placeholder="请选择活动区域" style="width:100%">
            <el-option label="新建" value="shanghai"></el-option>
            <el-option label="续建" value="beijing"></el-option>
            <el-option label="交工" value="beijing"></el-option>
            <el-option label="竣工" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible=false">取 消</el-button>
        <el-button size="medium" type="primary" @click="dialogFormVisible=false">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Brief",
  data() {
    return {
      name: "",
      active: "",
      dialogFormVisible: false,
      popShow: "",
      selectData: [],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ],
      form: { name: "" }
    };
  },
  methods: {
    edit(item) {
      console.log(item);
      this.dialogFormVisible = true;
    },
    close() {
      //   this.dialogFormVisible = false;
    },
    handleSelectionChange(value) {
      this.selectData = value;
    },
    add() {},
    del() {}
  }
};
</script>

<style lang="less" scoped>
.Brief {
  width: 100%;
  height: calc(100% - 40px);
  .search {
    width: 100%;
    height: 60px;
    padding: 10px 5px;
    position: relative;
    .input {
      width: 300px;
      margin-left: 10px;
      span {
        flex-shrink: 0;
      }
    }
  }
  .main {
    //   width: 100%;
    height: calc(100% - 60px);
    // overflow-y: scroll;
    // position: absolute
    border: 1px solid #ebeef5;
  }
}
</style>